<template>
  <div class="dfcc">
    <el-select
      ref="select"
      :value="value"
      @change="change"


      remote
      multiple
      reserve-keyword

      :placeholder="placeholder"
    >
      <el-option
        v-for="item in dataList"
        :key="item.file"
        :value="item.file"
        :label="item.fileInfo.originalName"
      >
      </el-option>
    </el-select>

    <el-button
      style="font-size: 28px; padding: 0;"
      type="text"
      icon="el-icon-circle-plus-outline"
      @click="cutUserShow"
    ></el-button>

    <hu-drawer
      title="选择文件"
      size="1000px"
      :open.sync="userShow"
      :loading="MixinLoading"
      @submit="addFrom2"
    >
      <!-- tent sta -->
      <el-form
        :model="userData"
        label-width="80px"
      >
        <el-row>
          <el-col :span="7">
            <el-form-item
              label="文件名称"
              prop="fileName"
            >
              <el-input

                v-model="userData.fileName"

                type="text"
                placeholder="请输入文件名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="状态"
              prop="type"
            >
              <el-select




                v-model="userData.issuedStatus"
                placeholder="请输入状态"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="录入人"
              prop="cuserName"
            >
              <el-input

                v-model="userData.cuserName"

                type="text"
                placeholder="请输入录入人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item class="searchFromButton">
              <el-button

                type="primary"
                icon="el-icon-search"
                @click="getList2"
              >查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          prop="isValid"
          label-width="0"
        >
          <hu-table
            highlight-current-row
            :tableData="tableData2"
            :loading="MixinLoading"
            :tableCol="tableCol2"
            @select-all="selectAll"
          >
            <template v-slot:selection="{row}">
              <el-checkbox v-model="row.checked"><span></span></el-checkbox>
            </template>

            <template v-slot:members="{row}">
              <HuFileBut
                v-if="row.fileInfo"
                :path="row.fileInfo.previewPath"
                :name="row.fileInfo.originalName"
              />
            </template>
            <template v-slot:issuedStatus="{row}">
              <el-button
                v-if="row.issuedStatus"

                round
                plain
                type="success"
              >已下发</el-button>
              <el-button
                v-else

                round
                plain
                type="danger"
              >待下发</el-button>
            </template>
          </hu-table>
        </el-form-item>
      </el-form>
      <!-- tent end -->
    </hu-drawer>
  </div>
</template>

<script>
import { getListIssuedFileList } from "@/api/teams/safety/meeting/management";
export default {
  props: {
    value: {
      default: () => [],
    },
    dataList: {
      default: () => [],
    },
    placeholder: {
      default: () => "请选择",
    },
  },
  data() {
    return {
      statusList: [
        {
          label: "待下发",
          value: false,
        },
        {
          label: "已下发",
          value: true,
        },
      ],
      loading: false,
      userShow: false,
      userData: {
        pageNum: 1,
        pageSize: 300,
      },
      tableData2: [],
      tableCol2: [
        {
          type: "selection",
          slot: "selection",
          width: "55",
        },
        {
          title: "序号",
          type: "index",
          width: "55",
        },
        {
          title: "文件名称",
          key: "fileName",
        },
        {
          title: "附件",
          slot: "members",
          width: "400",
          showOverflowTooltip: false,
        },
        {
          title: "上传人",
          key: "cuserName",
        },
        {
          title: "上传时间",
          key: "ctime",
        },
        {
          title: "状态",
          slot: "issuedStatus",
        },
      ],
      fileIds: [],
    };
  },
  methods: {
    selectAll(row) {
      if (row.length) {
        this.tableData3.forEach((e) => {
          this.$set(e, "checked", true);
        });
      } else {
        this.tableData3.forEach((e) => {
          this.$set(e, "checked", false);
        });
      }
    },
    addFrom2() {
      let data = this.tableData2.filter((e) => e.checked).map((e) => e.file);
      this.$emit("input", data);
      this.$emit("change", data);
      this.userShow = false;
    },
    change(e) {
      this.$emit("input", e);
      this.$emit("change", e);
    },
    cutUserShow() {
      this.resetUsers();
      this.getList2();
      this.fileIds = this.value ? this.value : [];
      this.userShow = true;
    },
    resetUsers() {
      this.userData = {};
    },
    getList2() {
      this.MixinLoading = true;
      getListIssuedFileList(this.userData).then(({ result }) => {
        this.MixinLoading = false;
        this.tableData2 = result.map((e) => ({
          ...e,
          checked: this.fileIds.indexOf(e.file) !== -1,
        }));
        console.log(this.tableData2, this.fileIds);
      });
    },
  },
};
</script>
